<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css基础语法</title>
		<!--引入外部css样式-->
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<style type="text/css">
			/**内部样式*/
			/* #userName{
				background-color: red;
			} */
			/**派生（包含）选择器***/
			/* #trUserName input{
				background-color: #625434;
			} */
			
			/*子对象选择器***/
			#trUserName > td,input{
				background-color: #41A863;
			}
			/**相邻选择器****/
			#trUserName + tr{
				background-color: #E0EDD3;
			}
			
			/**属性选择器**/
			td[width="30%"]{
				background-color: #C9D7E5;
			}
			td input[type="email"]{
				background-color: #C9D7E5;
			}
			
		</style>
	</head>
	<body>
		<form action="#" method="get">
			<table border="1px" cellpadding="5px" cellspacing="0p" width="600px" align="center">
				<tr id="trUserName">
					<td width="30%">用户名:</td>
					<td width="40%">
						<!-- style="background-color: #052896;" -->
						<input type="text" id="userName" name="userName" value="user"  />
					</td>
					<td width="30%">登录用户名</td>
				</tr>
				<tr>
					<td width="30%">密码:</td>
					<td width="40%"><input type="password" id="userPsw" name="userPsw" /></td>
					<td width="30%">登录用户名密码</td>
				</tr>
				<tr>
					<td width="30%">邮箱:</td>
					<td width="40%"><input type="email" id="userEmail" name="userEmail" /></td>
					<td width="30%">注册邮箱</td>
				</tr>
				<tr>
					<td width="30%">性别:</td>
					<td width="40%" >
						<input type="radio" id="userSexFemale" name="userSex" value="0" />女
						<input type="radio" id="userSexMale" name="userSex" value="1" />男
					</td>
					<td width="30%">选择性别</td>
				</tr>
				<tr>
					<td width="30%">兴趣:</td>
					<td width="40%">
						<input type="checkbox" id="userHobby1" name="userHobby" value="bj" />编程
						<input type="checkbox" id="userHobby2" name="userHobby" value="sduty" />学习
						<input type="checkbox" id="userHobby3" name="userHobby" value="game" />王者荣耀
					</td>
					<td width="30%">选择兴趣</td>
				</tr>
				<tr>
					<td width="30%">出生年月:</td>
					<td width="40%">
						<select id="userYear" name="userYear">
							<option value="2018">2018</option>
							<option value="2019">2019</option>
							<option value="2020">2020</option>
						</select>年
						<select id="userMonth" name="userMonth">
							<option></option>
							<option value="1">1月</option>
							<option value="2">2月</option>
							<option value="3">3月</option>
						</select>月
					</td>
					<td width="30%">选择出生年月</td>
				</tr>
				<tr>
					<td width="30%">头像:</td>
					<td width="40%"><input type="file" id="userImg" name="userImg" /></td>
					<td width="30%">选择头像</td>
				</tr>
				<tr>
					<td width="30%">简介:</td>
					<td width="40%">
						<textarea cols="40" rows="10" id="userIntroduction" name="userIntroduction"></textarea>
					</td>
					<td width="30%">填写个人简介</td>
				</tr>
				<tr align="center">
					<td width="40%" colspan="3">
						<input type="submit" value="提交" />
						&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="reset" value="重置" />
					</td>

				</tr>
			</table>
		</form>
	</body>
</html>
